<template>
    <div class="debris-detail-box" v-loading="loading">
        <el-form :model="heroDate" :rules="rules" ref="heroDate" label-width="140px" inline class="demo-ruleForm">
            <el-form-item label="英雄名称" prop="name">
                <el-input v-model="heroDate.name" disabled style="width:120px"></el-input>
            </el-form-item>
            <el-form-item label="职业" prop="tradeWzryCareerList" required>
                <el-select v-model="heroDate.careerIdsList" multiple collapse-tags style="width:160px" @change="zhiyeChange">
                    <el-option v-for="item in zhiyeList" :key="item.careerId" :label="item.careerName" :value="item.careerId"></el-option>
                </el-select>
            </el-form-item>
            <div class="input-img-box" required>
                <el-form-item label="英雄头像" prop="icon" required>
                    <UploadImg
                        v-model="heroDate.icon"
                        width="360"
                        height="360"
                        :search="true"
                    />
                </el-form-item>
                <el-form-item label="房间内队长背景" prop="captainPic" required>
                    <UploadImg
                        v-model="heroDate.captainPic"
                        width="681"
                        height="552"
                        :search="true"
                    />
                </el-form-item>
                <el-form-item label="房间内队员背景" prop="teamUserPic" required>
                    <UploadImg
                        v-model="heroDate.teamUserPic"
                        width="330"
                        height="552"
                        :search="true"
                    />
                </el-form-item>
            </div>
            <el-form-item v-if="toolsFlag > 1">
                <el-button @click="cancle">取消</el-button>
                <el-button type="primary" @click="submitForm('heroDate')">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data () {
        var validateCareer = (rule, value, callback) => {
            console.log(value)
            if (value && value.length === 0) {
                callback(new Error('请选择职业'))
            } else {
                callback()
            }
        }
        return {
            loading: false,
            zhiyeList: [
                {
                    careerId: 100,
                    careerName: '坦克'
                },
                {
                    careerId: 101,
                    careerName: '战士'
                },
                {
                    careerId: 102,
                    careerName: '刺客'
                },
                {
                    careerId: 103,
                    careerName: '法师'
                },
                {
                    careerId: 104,
                    careerName: '射手'
                },
                {
                    careerId: 105,
                    careerName: '辅助'
                }
            ],
            heroDate: {
                name: '',
                tradeWzryCareerList: [1]
            },
            rules: {
                name: [
                    { required: true, message: '请输入英雄名称', trigger: 'blur' }
                ],
                tradeWzryCareerList: [
                    { validator: validateCareer }
                ],
                icon: [
                    { required: true, message: '请选择英雄头像', trigger: 'blur' }
                ],
                captainPic: [
                    { required: true, message: '请选择房间内队长背景', trigger: 'blur' }
                ],
                teamUserPic: [
                    { required: true, message: '请选择房间内队员背景', trigger: 'blur' }
                ]
            },
            toolsFlag: 0 // 是否能保存开关
        }
    },

    watch: {
        heroDate: {
            handler () {
                this.toolsFlag++
            },
            deep: true
        }
    },

    mounted () {
        let name = this.$route.query.name
        this.getDetail(name)
    },

    methods: {
        // 获取详情
        getDetail (name) {
            this.loading = true
            this.$http.get('/trade/selectWzydHeroInfo', {
                params: {
                    pageNum: 1,
                    pageSize: 10,
                    keyWord: name
                }
            }).then(res => {
                this.loading = false
                if (res.code === '0') {
                    this.toolsFlag = 0
                    this.dataInit(res.data[0])
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            })
        },

        // 初始化数据
        dataInit (data) {
            // 保存原始数据
            this.firstData = JSON.parse(JSON.stringify(data))
            this.heroDate = data
            this.heroDate.careerIdsList = []
            data.tradeWzryCareerList.map(item => {
                this.heroDate.careerIdsList.push(item.careerId)
            })
        },
        zhiyeChange (val) {
            this.heroDate.tradeWzryCareerList = []
            this.zhiyeList.map(item => {
                val.map(valItem => {
                    if (item.careerId === valItem) {
                        this.heroDate.tradeWzryCareerList.push(item)
                    }
                })
            })
        },

        // 取消保存
        cancle () {
            this.heroDate = JSON.parse(JSON.stringify(this.firstData))
            this.heroDate.careerIdsList = []
            this.heroDate.tradeWzryCareerList.map(item => {
                this.heroDate.careerIdsList.push(item.careerId)
            })
            this.toolsFlag = 0
        },
        // 保存数据
        submitForm (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$http.post('/trade/updateWzydHeroInfo', this.heroDate).then(res => {
                        if (res.code === '0') {
                            this.toolsFlag = 1
                            this.dataInit(this.heroDate)
                            this.$message({
                                type: 'success',
                                message: '修改成功'
                            })
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.desc
                            })
                        }
                    })
                } else {
                    return false
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .debris-detail-box {
        min-width: 800px;
        .input-img-box {
            display: flex;
        }
    }
</style>
